import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
/**
 * Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
 * 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交（commit）mutation。这样使得我们可以方便地跟踪每一个状态的变化
 */

export default {

    state: {
        /**
         * 用户
         */

        /**
         * 标签值
         */
        editableTabsValue: 'Index',
        /**
         * 存储标签页的数组
         */
        editableTabs: [
            {
            title: '首页',
            name: 'Index'
            },
        ],

        /**
         * 管理员
         */

        editableAdministratorTabsValue: 'audit',
        editableAdministratorTabs: [
            {
                title: '首页',
                name: 'audit'
            },
        ]
    },
    /**
     * change the editableTabs by the way of committing the mutations
     */
    mutations: {
        /**
         * 标签页的添加操作
         */
        addTab(state, tab) {
            /**
             * if the tab to be added is in the editableTabs, the index will be assigned with the position of tab, or it will be assigned with -1
             */
            let index = state.editableTabs.findIndex(e => e.name === tab.name)

            if (index === -1) {//没有找到相同的标签页

                /**
                 * push the current tab's title & name into the editableTabs
                 */
                state.editableTabs.push({
                    title: tab.title,
                    name: tab.name,
                });
            }

            state.editableTabsValue = tab.name;
        },

        addAdministratorTab(state, tab) {
            let index = state.editableAdministratorTabs.findIndex(e => e.name === tab.name)

            if (index === -1) {//没有找到相同的标签页
                state.editableAdministratorTabs.push({
                    title: tab.title,
                    name: tab.name,
                });
            }

            state.editableAdministratorTabsValue = tab.name;
        },

    },
    actions: {}
}
